<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应急科普知识平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        // 自定义Tailwind主题配置
        tailwind.config = {
            theme: {
                extend: {  // 扩展默认主题
                    colors: {  // 自定义颜色变量（后续通过类名直接使用，如text-primary）
                        primary: '#165DFF',  // 主色调：蓝色（用于主要按钮、强调文本）
                        secondary: '#36D399',  // 辅助色：绿色（用于成功状态）
                        danger: '#F87272',  // 危险色：红色（用于错误、警告）
                        warning: '#FBBD23',  // 警告色：黄色
                        info: '#3ABFF8',  // 信息色：浅蓝色
                        dark: '#1E293B',  // 深色：用于文本、背景
                    },
                    fontFamily: {  // 自定义字体
                        sans: ['Inter', 'system-ui', 'sans-serif'],  // 无衬线字体栈
                    },
                }
            }
        }

        // 页面加载完成后验证登录状态
        window.onload = function () {
            const token = localStorage.getItem('token');  // 从localStorage获取登录令牌
            const username = localStorage.getItem('username');  // 获取用户名
            const authSection = document.getElementById('authSection');  // 获取认证区域元素
            if (token && username) {
                // 已登录：显示用户名和退出按钮
                authSection.innerHTML = `
                    <span>欢迎，用户：${username}</span>
                    <a href="/user/login" class="auth-btn" onclick="logout()">退出</a>
                `;
            } else {
                // 未登录：显示登录按钮并强制跳转登录页
                authSection.innerHTML = `
                    <a href="/user/login" class="auth-btn">登录</a>
                `;
                window.location.href = '/user/login';
            }
        };
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }

        .navbar {
            background-color: #2c3e50;
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .navbar-brand {
            font-size: 24px;
            font-weight: bold;
            text-decoration: none;
            color: white;
        }

        .navbar-menu {
            display: flex;
            gap: 20px;
        }

        .navbar-menu a {
            color: white;
            text-decoration: none;
            font-size: 16px;
            padding: 8px 12px;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

        .navbar-menu a:hover {
            background-color: #34495e;
        }

        .navbar-auth {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .navbar-auth span {
            font-size: 16px;
        }

        .auth-btn {
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            border-radius: 4px;
            background-color: #2196F3;
            color: white;
            transition: background-color 0.3s ease;
            text-decoration: none;
        }

        .auth-btn:hover {
            background-color: #1976D2;
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-dark">
    <!-- 导航栏 -->
    <header class="navbar">
        <a href="/" class="navbar-brand">应急图书管理系统</a>
        <div class="navbar-menu">
            <a href="/toEmergencyInfoPage">科普</a>
            <a href="/book/student/books">图书列表</a>
            <a id="myBorrowingsLink" href="#">我的借阅</a>
        </div>
        <div class="navbar-auth" id="authSection">
            <!-- 动态生成登录/退出按钮和提醒图标 -->
        </div>
    </header>

    <!-- 英雄区 -->
    <header id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-primary/90 to-primary relative overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://picsum.photos/id/1068/1920/1080')] bg-cover bg-center opacity-10"></div>
        <div class="absolute inset-0 bg-gradient-to-t from-primary to-transparent"></div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="text-center">
                <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-white leading-tight text-shadow mb-6">
                    应急科普知识平台
                </h1>
                <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 max-w-3xl mx-auto mb-8">
                    掌握应急知识，守护生命安全。提供专业、实用的应急救援知识和技能培训，帮助您在紧急情况下做出正确的决策。
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="#knowledge" class="px-6 py-3 bg-white text-primary font-medium rounded-lg shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary">
                        了解更多 <i class="fa fa-arrow-right ml-2"></i>
                    </a>
                    <a href="#resources" class="px-6 py-3 bg-transparent border-2 border-white text-white font-medium rounded-lg hover:bg-white/10 transition-all transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary">
                        应急资源 <i class="fa fa-exclamation-circle ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </header>

    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- 页面简介 -->
        <section id="about" class="mb-16">
            <div class="bg-white rounded-xl shadow-lg p-8 transform transition-all hover:shadow-xl">
                <h2 class="text-3xl font-bold text-dark mb-6 flex items-center">
                    <i class="fa fa-info-circle text-primary mr-3"></i> 关于我们
                </h2>
                <div class="prose max-w-none">
                    <p class="text-lg text-gray-700 mb-4">
                        应急科普知识平台致力于普及各类紧急情况的应对知识和技能，提高公众的应急意识和自救互救能力。我们提供全面的应急知识科普，包括自然灾害、事故灾难、公共卫生事件和社会安全事件等方面的应对策略。
                    </p>
                    <p class="text-lg text-gray-700">
                        通过本平台，您可以学习到专业的应急知识，了解各类紧急情况的应对方法，掌握基本的急救技能，以及获取相关的应急资源链接。我们的目标是帮助每个人在面对紧急情况时能够冷静应对，最大限度地减少损失。
                    </p>
                </div>
            </div>
        </section>

        <!-- 知识科普 -->
        <section id="knowledge" class="mb-16">
            <h2 class="text-3xl font-bold text-dark mb-8 flex items-center">
                <i class="fa fa-book text-primary mr-3"></i> 应急知识科普
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="h-48 bg-primary/10 flex items-center justify-center">
                        <i class="fa fa-tint text-primary text-6xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-dark mb-3">洪涝灾害</h3>
                        <p class="text-gray-700 mb-4">
                            洪涝灾害是一种常见的自然灾害，具有突发性强、破坏力大等特点。了解洪涝灾害的应对措施，可以帮助您在灾害发生时保护自己和他人的生命安全。
                        </p>
                        <div class="bg-blue-50 border-l-4 border-blue-400 p-4">
                            <h4 class="font-bold text-blue-700 mb-2">应对要点：</h4>
                            <ul class="list-disc pl-5 text-blue-600 space-y-1">
                                <li>及时关注天气预报和预警信息</li>
                                <li>提前准备必要的应急物资</li>
                                <li>如遇洪水，迅速转移到高处</li>
                                <li>避免接触洪水，防止触电和溺水</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="h-48 bg-orange-50 flex items-center justify-center">
                        <i class="fa fa-fire text-orange-500 text-6xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-dark mb-3">火灾逃生</h3>
                        <p class="text-gray-700 mb-4">
                            火灾是一种突发性强、破坏性大的灾害，掌握火灾逃生知识至关重要。正确的逃生方法可以大大提高您在火灾中的生存几率。
                        </p>
                        <div class="bg-orange-50 border-l-4 border-orange-400 p-4">
                            <h4 class="font-bold text-orange-700 mb-2">逃生要点：</h4>
                            <ul class="list-disc pl-5 text-orange-600 space-y-1">
                                <li>保持冷静，迅速判断火势和逃生方向</li>
                                <li>用湿毛巾捂住口鼻，低姿前行</li>
                                <li>按照疏散指示标志逃生，不乘坐电梯</li>
                                <li>若无法逃生，应关紧门窗，用湿毛巾封堵门缝</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="h-48 bg-red-50 flex items-center justify-center">
                        <i class="fa fa-ambulance text-red-500 text-6xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-dark mb-3">急救知识</h3>
                        <p class="text-gray-700 mb-4">
                            急救是指在紧急情况下对伤病员进行的初步救援和护理。掌握基本的急救知识和技能，可以在关键时刻挽救生命。
                        </p>
                        <div class="bg-red-50 border-l-4 border-red-400 p-4">
                            <h4 class="font-bold text-red-700 mb-2">急救要点：</h4>
                            <ul class="list-disc pl-5 text-red-600 space-y-1">
                                <li>首先确保现场安全，避免二次伤害</li>
                                <li>拨打急救电话120，准确描述情况</li>
                                <li>掌握心肺复苏（CPR）和海姆立克急救法</li>
                                <li>对出血伤口进行压迫止血</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                    <div class="h-48 bg-teal-50 flex items-center justify-center">
                        <i class="fa fa-bolt text-teal-500 text-6xl"></i>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-dark mb-3">地震避险</h3>
                        <p class="text-gray-700 mb-4">
                            地震是一种不可预测的自然灾害，了解地震避险知识可以帮助您在地震发生时保护自己。地震发生时，冷静应对是关键。
                        </p>
                        <div class="bg-teal-50 border-l-4 border-teal-400 p-4">
                            <h4 class="font-bold text-teal-700 mb-2">避险要点：</h4>
                            <ul class="list-disc pl-5 text-teal-600 space-y-1">
                                <li>迅速躲在桌子等坚固家具下方</li>
                                <li>远离窗户、吊灯等可能掉落的物品</li>
                                <li>如在室外，远离建筑物、树木和电线杆</li>
                                <li>不要慌乱奔跑，避免拥挤踩踏</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 应急资源链接 -->
        <section id="resources" class="mb-16">
            <h2 class="text-3xl font-bold text-dark mb-8 flex items-center">
                <i class="fa fa-external-link text-primary mr-3"></i> 应急资源链接
            </h2>
            <p class="text-lg text-gray-700 mb-8 max-w-3xl">
                以下是一些专业的应急救援和科普网站，点击相应按钮可以跳转到这些网站获取更多专业知识和帮助。
            </p>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <a href="https://www.mem.gov.cn/" target="_blank" class="group">
                    <div class="bg-white rounded-xl shadow-md p-6 text-center transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border-l-4 border-primary">
                        <div class="text-primary text-4xl mb-4">
                            <i class="fa fa-shield group-hover:scale-110 transition-transform"></i>
                        </div>
                        <h3 class="text-xl font-bold text-dark mb-2 group-hover:text-primary transition-colors">国家应急管理部</h3>
                        <p class="text-gray-600">提供权威的应急管理信息和救援指南</p>
                    </div>
                </a>
                
                <a href="https://www.crcntc.org.cn/spring/login/index" target="_blank" class="group">
                    <div class="bg-white rounded-xl shadow-md p-6 text-center transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border-l-4 border-red-500">
                        <div class="text-red-500 text-4xl mb-4">
                            <i class="fa fa-heartbeat group-hover:scale-110 transition-transform"></i>
                        </div>
                        <h3 class="text-xl font-bold text-dark mb-2 group-hover:text-red-500 transition-colors">中国急救网</h3>
                        <p class="text-gray-600">专业的急救知识和技能培训平台</p>
                    </div>
                </a>
                
                <a href="https://www.chinacdc.cn/" target="_blank" class="group">
                    <div class="bg-white rounded-xl shadow-md p-6 text-center transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border-l-4 border-blue-500">
                        <div class="text-blue-500 text-4xl mb-4">
                            <i class="fa fa-medkit group-hover:scale-110 transition-transform"></i>
                        </div>
                        <h3 class="text-xl font-bold text-dark mb-2 group-hover:text-blue-500 transition-colors">中国疾病预防控制中心</h3>
                        <p class="text-gray-600">提供公共卫生事件预防和控制信息</p>
                    </div>
                </a>
                
                <a href="https://www.cea.gov.cn/" target="_blank" class="group">
                    <div class="bg-white rounded-xl shadow-md p-6 text-center transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border-l-4 border-orange-500">
                        <div class="text-orange-500 text-4xl mb-4">
                            <i class="fa fa-earth-americas group-hover:scale-110 transition-transform"></i>
                        </div>
                        <h3 class="text-xl font-bold text-dark mb-2 group-hover:text-orange-500 transition-colors">中国地震局</h3>
                        <p class="text-gray-600">提供地震监测和预警信息</p>
                    </div>
                </a>
                
                <a href="http://www.mwr.gov.cn/" target="_blank" class="group">
                    <div class="bg-white rounded-xl shadow-md p-6 text-center transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border-l-4 border-teal-500">
                        <div class="text-teal-500 text-4xl mb-4">
                            <i class="fa fa-tint group-hover:scale-110 transition-transform"></i>
                        </div>
                        <h3 class="text-xl font-bold text-dark mb-2 group-hover:text-teal-500 transition-colors">水利部</h3>
                        <p class="text-gray-600">提供洪水预警和水资源管理信息</p>
                    </div>
                </a>
            </div>
        </section>

    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center mb-4">
                        <i class="fa fa-exclamation-triangle text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl">应急科普</span>
                    </div>
                    <p class="text-gray-400 mb-4">
                        掌握应急知识，守护生命安全。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-wechat text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-youtube-play text-xl"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="#about" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                        <li><a href="#knowledge" class="text-gray-400 hover:text-white transition-colors">科普知识</a></li>
                        <li><a href="#resources" class="text-gray-400 hover:text-white transition-colors">应急资源</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">应急知识</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">洪涝灾害</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">火灾逃生</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">急救知识</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">地震避险</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系方式</h3>
                    <ul class="space-y-2">
                        <li class="flex items-center">
                            <i class="fa fa-envelope text-primary mr-2"></i>
                            <span class="text-gray-400">prachan645@gmail</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone text-primary mr-2"></i>
                            <span class="text-gray-400">18155923049</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-map-marker text-primary mr-2"></i>
                            <span class="text-gray-400">应急管理大学</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2025 应急科普知识平台 版权所有</p>
            </div>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果（当前代码中navbar id未定义，可能是笔误，逻辑为滚动时改变导航栏样式）
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {  // 滚动超过50px
                navbar.classList.add('bg-white/95', 'backdrop-blur-sm', 'shadow-lg');  // 添加半透明白色背景、模糊效果、深阴影
                navbar.classList.remove('bg-white');  // 移除纯白色背景
            } else {
                navbar.classList.remove('bg-white/95', 'backdrop-blur-sm', 'shadow-lg');
                navbar.classList.add('bg-white');
            }
        });

        // 平滑滚动：点击锚点链接时平滑滚动到目标位置
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();  // 阻止默认跳转行为
                const targetId = this.getAttribute('href');  // 获取目标锚点ID（如#knowledge）
                const targetElement = document.querySelector(targetId);  // 找到目标元素
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,  // 滚动到目标元素顶部-80px（避开导航栏遮挡）
                        behavior: 'smooth'  // 平滑滚动效果
                    });
                }
            });
        });

        // 卡片悬停动画（补充CSS中card-hover的交互，与CSS动画效果一致）
        document.querySelectorAll('.card-hover').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px)';  // 上移5px
                this.style.boxShadow = '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)';  // 加深阴影
            });
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';  // 恢复原位
                this.style.boxShadow = '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)';  // 恢复原阴影
            });
        });
    </script>
</body>
</html>
    